<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="content"><span id="ele">页面元素</span></div>
    <input type="text" value="input" id="name">
    <a href="http://www.bilibili.com" target="_blank">哔哩哔哩</a>
    <div style="font-size: 50px;">我是一个div</div>
    <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ol>
    <script>
        // 添加元素
        $("ol").append("append");
        $("ol").prepend("prepend");
        $("ol").after("after");
        $("ol").before("before");

        //删除元素
        // $("ol").remove();
        // $("ol").empty();
        // $("#content").click(function(){
        //     //获取页面元素内容
        //     console.log($(this).text());//不能获取html标签
        //     console.log($(this).html());//能获取html标签
        //     console.log($("#name").val);

        //     //修改页面元素
        //     $(this).text("<h1>我是点击后的内容</h1>");//会保留html标签
        //     $(this).html("<h1>我是点击后的内容</h1>");//不会保留html标签
        //     $("#name").val("input222222");

        // });
        console.log($("a").attr("href"));
        $("a").attr("href","http://www.youdao.com");

        //操作css
        console.log($("div").css("font-size"));
        $("div").css("font-size","16px");

        // $(document).ready(function(){
        //     alert("页面加载完成")
        // });
        
        $("button").click(function(){
            alert("点击弹框")
        });
    </script>

</body>
</html>